<script>
//基本折线图配置
import BaseConfig from '../BaseConfig';
import * as ConfigEnum from '../config/config-enum';

export default {
  name: 'PieConfig',
  mixins: [BaseConfig],
  data() {
    return {
      roseTypes: ConfigEnum.PIE_ROSE_TYPE, //饼图类型
      selectedModes: ConfigEnum.PIE_SELECT_MODE, //选择模式
      selectedRoseType: 'false', //选择的饼图类型
      selectionMode: 'false', //饼图选择模式
      innerRadius: 0, //饼图内半径
      outerRadius: 50, //饼图外半径
      offsetX: 50, //横向偏移
      offsetY: 50, //纵向偏移
    };
  },
  created() {
    this.selectedRoseType = this.chartOptions.settings.roseType.toString();
    this.selectionMode = this.chartOptions.settings.selectedMode.toString();
    let radiusArray = this.chartOptions.extend.series[0].radius;
    this.innerRadius = parseInt(radiusArray[0] || 0);
    this.outerRadius = parseInt(radiusArray[1] || 50);
    let offsetArray = this.chartOptions.extend.series[0].center;
    this.offsetX = parseInt(offsetArray[0] || 50);
    this.offsetY = parseInt(offsetArray[1] || 50);
  },
  methods: {
    updateRoseType() {
      if (this.selectedRoseType === 'false') {
        this.chartOptions.settings.roseType = false;
      } else {
        this.chartOptions.settings.roseType = this.selectedRoseType;
      }
      this.updateOptions();
    },
    updateSelectionMode() {
      if (this.selectionMode === 'false') {
        this.chartOptions.settings.selectedMode = false;
      } else {
        this.chartOptions.settings.selectedMode = this.selectionMode;
      }
      this.updateOptions();
    },
    updateRadius() {
      this.chartOptions.extend.series[0].radius = [this.innerRadius + '%', this.outerRadius + '%'];
      this.updateSeriesAndOptions('radius');
    },
    updateOffset() {
      this.chartOptions.extend.series[0].center = [this.offsetX + '%', this.offsetY + '%'];
      this.updateSeriesAndOptions('center');
    },
  },
};
</script>

<template>
  <div>
    <Row>
      <Col span="8">
      <span>显示模式：</span>
      </Col>
      <Col span="16">
      <Select
        v-model="selectedRoseType"
        @on-change="updateRoseType">
        <Option
          v-for="item in roseTypes"
          :value="item.value"
          :key="item.value">{{ item.key }}</Option>
      </Select>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>外半径：</span>
      </Col>
      <Col span="16">
      <Slider
        v-model="outerRadius"
        @on-change="updateRadius"></Slider>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>内半径：</span>
      </Col>
      <Col span="16">
      <Slider
        v-model="innerRadius"
        @on-change="updateRadius"></Slider>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>横向偏移：</span>
      </Col>
      <Col span="16">
      <Slider
        v-model="offsetX"
        @on-change="updateOffset"></Slider>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>纵向偏移：</span>
      </Col>
      <Col span="16">
      <Slider
        v-model="offsetY"
        @on-change="updateOffset"></Slider>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>选择模式：</span>
      </Col>
      <Col span="16">
      <Select
        v-model="selectionMode"
        @on-change="updateSelectionMode">
        <Option
          v-for="item in selectedModes"
          :value="item.value"
          :key="item.value">{{ item.key }}</Option>
      </Select>
      </Col>
    </Row>
  </div>
</template>

<style>
</style>
